<template>
  <div class="found-wapper borderbox">
    <!-- 头部 -->
    <div class="top flex pd15">
      <MoreMenu />
      <van-search
        class="flex1"
        v-model="searchValue"
        shape="round"
        placeholder="请输入搜索关键词"
      />
      <i class="iconfont icon-maikefeng-xue f22" style="color: #111"></i>
    </div>

    <!-- banner -->
    <div class="banner pdlr15">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="item in banner.arr"
          :key="item.encodeId"
          style="position: relative"
        >
          <img
            :src="item.imageUrl"
            alt=""
            @click="toSongDetile(item.encodeId)"
          />
          <van-tag plain type="danger postionr0b0">{{
            item.typeTitle
          }}</van-tag>
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="iconscroll flex">
      <div class="item">
        <div class="bg">
          <i class="iconfont icon-rili"></i>
        </div>
        <div class="tagname">每日推荐</div>
      </div>
      <div class="item">
        <div class="bg">
          <i class="iconfont icon-diantai"></i>
        </div>
        <div class="tagname">私人FM</div>
      </div>
      <div class="item">
        <div class="bg">
          <i class="iconfont icon-gedan"></i>
        </div>
        <div class="tagname">歌单</div>
      </div>
      <div class="item">
        <div class="bg">
          <i class="iconfont icon-zhibo"></i>
        </div>
        <div class="tagname">直播</div>
      </div>
      <div class="item">
        <div class="bg">
          <i class="iconfont icon-pic3"></i>
        </div>
        <div class="tagname">数字专辑</div>
      </div>
      <div class="item">
        <div class="bg">
          <i class="iconfont icon-shuimianguanli"></i>
        </div>
        <div class="tagname">助眠解压</div>
      </div>
      <div class="item">
        <div class="bg">
          <i class="iconfont icon-shoucang"></i>
        </div>
        <div class="tagname">歌房</div>
      </div>
      <div class="item">
        <div class="bg">
          <i class="iconfont icon-Game"></i>
        </div>
        <div class="tagname">游戏专区</div>
      </div>
      &nbsp;
    </div>
    <van-divider />
    <!--横线-->
    <div class="iconscroll2 flex">
      <div class="item2" v-for="item in sonData.sons" :key="item.id">
        <div class="bg">
          <div class="tag">
            <i class="iconfont icon-24gl-play"></i>
            {{ bigNumberTransform(item.playCount) }}
          </div>
          <img :src="item.picUrl" alt="" />
        </div>
        <div class="tagname">{{ item.name }}</div>
      </div>

      &nbsp;
    </div>

    <Playercpn v-if="store.state.musicSrc" />
    <PlayerList :flag="PlayerListFlag" />
  </div>
</template>

<script setup>
import MoreMenu from '../../../components/more-menu/index'
import { getBanner, resource } from '../../../service/api/found.js'
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { bigNumberTransform } from '@/utlis/globalfnc.js'
import Playercpn from '@/components/player-cpn'

import PlayerList from '@/components/player-list'
const router = useRouter()
const store = useStore()

let searchValue = ref('')

let banner = reactive({
  arr: []
})

const sonData = reactive({
  sons: []
})

async function getBners() {
  const { data: res } = await getBanner({ type: 0 })
  banner.arr = res.banners
}

//去播放页 传入一个歌曲ID
function toSongDetile(SonID) {
  router.push({
    path: '/playpage',
    query: {
      encodeId: SonID
    }
  })
}

onMounted(async () => {
  getBners()
  const { data: res } = await resource()
  sonData.sons = res.result
})

let PlayerListFlag = ref(false)

const PlayerListshow = () => {
  PlayerListFlag.value = true
}
</script>

<style scoped lang="scss">
.found-wapper {
  height: 100%;
  width: 100%;
}
.my-swipe {
  height: 150px;
}

.my-swipe .van-swipe-item img {
  height: 100%;
  width: 100%;
  border-radius: 15px;
}
.iconscroll {
  white-space: nowrap;
  overflow-x: scroll;
  margin-top: 20px;
  padding: 0 20px;
}
.iconscroll .item {
  display: inline-block;
  min-width: 14%;
  height: 70px;
  text-align: center;
  margin-right: 20px;
}
.iconscroll .item:last-child {
  /* margin-right: 40px; */
  /* width: 18%; */
}

.iconscroll .item .bg {
  background-color: #fff1f1;
  border-radius: 50%;
  /* text-align: center; */
  margin: 0 auto;
  width: 42px;
  height: 42px;
  line-height: 42px;
}
.iconscroll .item .tagname {
  margin-top: 8px;
  font-size: 12px;
  color: #323232;
}
::-webkit-scrollbar {
  display: none;
}
.iconscroll .iconfont {
  text-align: center;
  font-size: 20px;
  /* background: linear-gradient(to right, #fd2f2f, #fdafaf); */
  background-image: -webkit-linear-gradient(right, #fd2f2f, #fd4f4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.iconscroll2 {
  align-items: flex-start;
  overflow-x: scroll;
  margin-top: 20px;
  padding: 0 20px;
}
.iconscroll2 .item2 {
  min-width: 30%;
  // height: 100px;
  margin-right: 10px;
  .bg {
    position: relative;
    .tag {
      font-size: 10px;
      position: absolute;
      right: 2px;
      top: 6px;
      color: #fff;
      background: rgba($color: #000000, $alpha: 0.5);
      padding: 2px 4px;
      border-radius: 15px;
      i {
        font-size: 10px;
      }
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }
  }
  .tagname {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    font-size: 12px;
    color: #323232;
  }
}
</style>
